<template>
  <div v-for="item in data" :key="item">
    <!-- <router-link class="wrap"
                 @click="getcourseId(item.courseId)"
                 :to="{
        name: 'CourseInfo',
        params: { courseId: item.courseId }, 
      }"> -->
    <div class="wrap" @click="goCourseInfo(item.courseId)">
      <div class="image">
        <img :src="item.courseImg" />
      </div>
      <div class="text">
        <div class="title">{{ item.courseName }}</div>
        <div class="teacher">讲师：{{ item.teacher }}</div>
        <div class="else">
          <span class="price">￥{{ item.courseCharge }}</span>
          <div class="people">
            <van-icon name="friends" color="#87d4eb" size="18px"></van-icon>
            <div class="number">{{ item.participantCount }}人</div>
          </div>
        </div>
      </div>
    </div>
    <!-- </router-link> -->
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { useRouter, useRoute } from 'vue-router'
export default {
  setup () {
    const router = useRouter(),
      route = useRoute()
    // const getcourseId = (val) => {
    //    window.sessionStorage.setItem('courseId', val)
    // }
    const goCourseInfo = (val) => {
      window.sessionStorage.setItem('courseId', val)
      if(window.sessionStorage.getItem('token')){
        router.push({
          name: 'CourseInfo',
          params: { courseId: val },
        })
      }
      else {
        Dialog.alert({
          title: '提示',
          message: '请登录查看更多精彩课程',
        }).then(() => {
          // on close
        })
      }
    }
    return {
      goCourseInfo,
      // getcourseId
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  props: {
    data: {
      type: Object,
      default () {
        return {};
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  .text {
    .title {
      margin-top: 5px;
      font-size: 12px;
      font-weight: 700;
    }
  }
}
.else {
  position: relative;
  display: flex;
  .price {
    font-size: 12px;
    font-weight: 550;
    color: #fdb52b;
  }
  .people {
    display: flex;
    position: absolute;
    left: 70px;
    font-size: 10px;
    font-weight: 300;
    // margin-bottom: 15px;
  }
}
</style>
